<template>
  <Section class="bg-base-300">
    <div
      class="relative flex flex-col items-center justify-between gap-y-4 pb-10 pt-10 md:flex-row"
    >
      <SectionTitle
        title="全部文章"
        description="您的高质量内容的目的地，在我们的大部分文章保持最新、最引人入胜和发人深省的文章！"
      />
      <InnerLinks />
    </div>
    <div class="mb-20 grid gap-6 sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
      <PostCardWithDigest
        v-for="post in data?.query.results"
        :key="post.id"
        :post="post"
        digest
      />
    </div>
    <div class="flex items-center justify-between px-4">
      <InnerLinks />
      <ZPagination
        :total="total"
        v-model:page="page"
        v-model:page-size="pageSize"
        :buttons="['first', 'last']"
      />
    </div>
  </Section>
</template>
<script setup lang="ts">
import InnerLinks from "@/components/InnerLinks.vue";
import PostCardWithDigest from "@/components/PostCardWithDigest.vue";
import { usePageFetch } from "@/composables/usePageFetch";
import { Post, User } from "@/stores/types";

const { data, execute, total, page, pageSize } = usePageFetch<Post & User>(
  "posts",
  { pageSize: 12 },
);

onActivated(() => {
  execute();
});
</script>
